import React from 'react';
import {Col, Row, Modal, Descriptions, Badge, Skeleton} from 'antd';
import styles from './index.less';
import {connect} from "dva";
import {trigger} from "@/utils/utils";
import {dateFormat, currentTime} from "@/utils/time";
import echarts from 'echarts'
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import PredictionDetail from "../PredictionDetail";

class LuzhaPrediction extends React.Component {
  stopLoop = false;
  state = {
    scoreQuntile: null,
    current: currentTime(),
    predictionData: {
      predictScore: null,
      curScore: null,
      bestScore: null,
      status: {
        "CG_LT_GL_GL04_TQXZS_status": "正常",
        "CG_LT_GL_GL04_LFLL_status": "正常",
        "CG_LT_GL_GL04_FYLL_status": "正常",
        "CG_LT_GL_GL04_FCokeRate_status": "正常",
        "CG_LT_GL_GL04_FCoalRate_status": "正常",
        "CG_LT_GL_GL04_RFWD_status": "正常",
        "CG_LT_GL_GL04_SBYCZB_status": "正常",
        "CG_LT_GL_GL04_XBYCZB_status": "正常",
      },
      statusDict: {
        "CG_LT_GL_GL04_TQXZS_status": "透气性指数",
        // "CG_LT_GL_GL04_FZWD_status": "",
        "CG_LT_GL_GL04_LFLL_status": "冷风流量",
        "CG_LT_GL_GL04_FYLL_status": "富氧流量",
        "CG_LT_GL_GL04_FCokeRate_status": "焦比",
        "CG_LT_GL_GL04_FCoalRate_status": "煤比",
        "CG_LT_GL_GL04_RFWD_status": "热风温度",
        "CG_LT_GL_GL04_SBYCZB_status": "上部压差占比",
        "CG_LT_GL_GL04_XBYCZB_status": "下部压差占比",
      },
    },
    visible: false
  };

  componentDidMount() {
    const {dispatch} = this.props;
    this.autoScoreReq = requestAnimationFrame(() =>
      trigger(
        () => {
          dispatch({
            type: 'luzha/getPrediction'
          });

        },
        new Date().valueOf(),
        10 * 1000,
        true,
        () => this.stopLoop));

  }

  componentWillUnmount() {
    cancelAnimationFrame(this.autoScoreReq);
    this.stopLoop = true
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const {predictionData} = nextProps;
    // 及时更新display
    if (predictionData && Object.keys(predictionData).length > 0 && predictionData !== prevState.predictionData) {
      return {
        predictionData
      }
    }

    return null;
  }

  render() {

    const {
      width = 100,
      height = 1,
      predictionData
    }
      = this.props;
    const {main,recommend} = predictionData

    const dom = recommend.map(item=>(
      <Row key={item}>
        <Col span={8}>
          {item.key}
        </Col>
        <Col span={8}>
          {item.status}
        </Col>
        <Col span={8}>
          {item.recommend}
        </Col>
      </Row>
  ))

    return (
      <div style={{width: `${width}%`, height}}>
        <Descriptions title="" bordered>
          {main.map(item => (
            <Descriptions.Item label={`${item.name}[当前]`} span={1}>
              {item.current}
            </Descriptions.Item>
          ))}
          {
            main.map(item => (
              <Descriptions.Item label={`${item.name}[预测]`} span={1}>
                {item.predict}
              </Descriptions.Item>
            ))
          }
          <Descriptions.Item label="操作调整">
            {dom}
          </Descriptions.Item>
        </Descriptions>
      </div>

    )
  }
}

export default connect(({luzha}) => ({
  predictionData: luzha.predictionData
}))
(LuzhaPrediction);
